<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="grandpa">
      <div class="dad">
        <div class="son">son1</div>
        <div class="son">son2</div>
        <div class="son">son3</div>
      </div>
    </div>
    <script>
      // 获取元素
      // const dad = document.querySelector('.dad');
      const son1 = document.querySelector(".son");
      // 获取父元素
      const dad = son1.parentNode;

      // 获取爷爷元素
      const grandpa = dad.parentNode;
      // 获取子元素
      const son2 = dad.children[1];
      console.log("son2", son2);
      // 获取下一个兄弟元素
      const son2Next = son2.nextElementSibling;
      console.log("son2Next", son2Next);
      // 获取上一个兄弟元素
      const son2Previous = son2.previousElementSibling;
      console.log("son2Previous", son2Previous);
      // 创建节点
      const son5 = document.createElement("div");
      son5.innerHTML = "son5";
      // 添加节点，添加到父元素的最后一个子元素
      dad.appendChild(son5);
      // 添加节点，添加到父元素的某个子元素前
      const son4 = document.createElement("div");
      son4.innerHTML = "son4";
      dad.insertBefore(son4, son5);

      // 克隆节点
      // 1. true：克隆时会包含后代节点
      // 2. false：克隆时不包含后代节点
      // 3. 默认为false
      const son5Clone = son5.cloneNode(true);
      dad.appendChild(son5Clone);
      // 删除节点
      dad.removeChild(son5Clone);
    </script>
  </body>
</html>
